<template>
	<!-- 异步级联多列联动组件 -->
	<view class="selectAuto">
		<u-popup ref="dlpopup" v-model="show" mode="bottom" :mask-close-able="false">
			<view class="dlpopup">
				<view class="dltitle">
					<view class="dlcancel" @click="$emit('dlcancel')">取消</view>
					<view>{{title}}</view>
					<view class="dlsure" @click="dlsure()">确定</view>
				</view>
				<view class="dlbtn">
					<view v-for="(item,index) in targetList" :key="item[nodeKey]" :class="item[nodeKey]==''?'target':''" @click="dlsw(item,index)">{{item[nodeVal]}}</view>
				</view>
				<view class="dlcon">
					<scroll-view class="dlView" scroll-y="true">
						<view v-for="(item,index) in dataList"
						 :key="index" @click="dlsel(item,index)">{{item[nodeVal]}}</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'selectAuto',
		data() {
			return {
				targetList:[{id:'',name:'请选择'}],//选中的结果(临时)
				targetListTrue:[]//选中的结果
			}
		},
		props:{
			column:{//联动级数
				type:[Number,String],
				default:2
			},
			show:{//弹窗是否显示
				type:Boolean,
				default:false
			},
			dataList:{//当前列表展示的数据
				type:Array,
				default:[]
			},
			title:{ //弹窗中间文字
				type:[String],
				default:'请选择'
			},
			defaultProps:{ //自定义的字段
				type:Object,
				default(){
					return{
						id:"id",
						name:"name"
					}
				}
			}
		},
		mounted:function(){
			
		},
		methods: {
			//选中当前目标
			dlsel:function(item,index){
				this.targetList[this.targetList.length - 1][this.nodeVal] = item[this.nodeVal];
				this.targetList[this.targetList.length - 1][this.nodeKey] = item[this.nodeKey];
				if(this.targetList.length < 3){
				    this.getDatalist(item)
				    this.targetList.push({id:'',name:'请选择'})
				}
			},
			//随意切换已选中的目标
			dlsw:function(item,index){
				if(index == 0){
				    this.targetList = [{id:'',name:'请选择'}]
				    this.getDatalist()
				}else if(index < this.column){
				    if(index == 1){
				        this.getDatalist(this.targetList[index-1])
				    }else if(index == this.column-1){
				        return ;
				    }
				    this.targetList = this.targetList.slice(0,index)
				    this.targetList.push({id:'',name:'请选择'})
				}
			},
			//确定选择按钮
			dlsure:function(){
				this.targetListTrue = this.targetList;
				this.$emit('dlsure',this.targetListTrue)
			},
			//触发加载下一级列表函数 item:表示上一级的所有数据
			getDatalist:function(item){
				this.$emit('getDatalist',item)
			}
		},
		computed:{
			nodeKey(){
				return this.defaultProps.id;
			},
			nodeVal(){
				return this.defaultProps.name;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selectAuto{
		.dlpopup{
			background-color: #FFFFFF;
			width: 100%;
			box-sizing: border-box;
			font-size: $uni-font-size-base;
			.dltitle{
				display: flex;
				justify-content: space-between;
				padding: 20rpx 40rpx;
				border-bottom: 1rpx solid $uni-border-color-e5;
				.dlsure{
					color: #007AFF;
				}
				.dlcancel{
					color: #999999;
				}
			}
			.dlbtn{
				display: flex;
				padding: 0 15rpx;
				view{
					padding: 15rpx;
					&.target{
						color: #007AFF;
						border-bottom: 4rpx solid #007AFF;
					}
				}
			}
			.dlcon{
				display: flex;
				justify-content: space-around;
				.dlView{
					height: 600rpx;
					text-align: center;
					view{
						height: 100rpx;
						line-height: 100rpx;
						&.target{
							color: #007AFF;
						}
					}
				}
			}
		}
	}
</style>
